<template>
  <div>
    <button @click="activeName = 'panel2'">click</button>
    <!-- <XtxTabs v-model="activeName">
      <XtxTabsPanel label="标题1" name="panel1">1</XtxTabsPanel>
      <XtxTabsPanel label="标题2" name="panel2">2</XtxTabsPanel>
      <XtxTabsPanel label="标题3" name="panel3">3</XtxTabsPanel>
    </XtxTabs> -->
    <XtxTabs v-model="activeName" @tab-click="handleClick">
      <!-- a -->
      <!-- aaa -->
      <XtxTabsPanel
        v-for="item in orderStatus"
        :label="item.label"
        :name="item.name"
        :key="item.name"
        >{{ item.label }}</XtxTabsPanel
      >
    </XtxTabs>
  </div>
</template>

<script>
import { ref } from 'vue-demi'
export default {
  setup() {
    const activeName = ref('all')
    const orderStatus = [
      { name: 'all', label: '全部订单' },
      { name: 'unpay', label: '待付款' },
      { name: 'deliver', label: '待发货' },
      { name: 'receive', label: '待收货' },
      { name: 'comment', label: '待评价' },
      { name: 'complete', label: '已完成' },
      { name: 'cancel', label: '已取消' }
    ]
    const handleClick = (name) => {
      console.log(name)
    }
    return { activeName, orderStatus, handleClick }
  }
}
</script>
